<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        li {
            list-style: none;
        }

        .boss {
            width: 600px;
            height: 400px;
            border: 1px solid red;
            overflow: hidden;
            position: relative;
            margin: 50px auto;
        }

        img {
            width: 600px;
            height: 400px;
            vertical-align: middle;
        }

        .liss {
            width: 3000px;
            display: flex;
            position: absolute;
        }
    </style>
    <script>

        // 1 每隔1s播放下一章图片    一开始播放第一张   第二张    第三张   1 2 3 4 5
        //     设置一个变量 i    后面通过定时器  i++
        //     setInterval(function(){} , 1000)

        // 2 图怎么播放   boss大盒子600   ul宽度3000   超出隐藏
        //     ul使用了定位   每隔1s改变ul的left的值  0 -600  -1200  -1800 。。。

        // 3 所有图片播放完毕   回到第一张


        // document.querySelector()  获取标签


        // 设置样式   obj.style.属性 = 属性值

        
        // window.onload = function () {
        //     等待页面加载完毕之后再执行
        // }
    </script>
</head>

<body>
    <div class="boss">
        <ul class="liss">
            111
            <li><img src="../img/a1.webp" alt=""></li>
            <li><img src="../img/a2.jpg" alt=""></li>
            <li><img src="../img/a3.jpg" alt=""></li>
            <li><img src="../img/a4.webp" alt=""></li>
            <li><img src="../img/a5.webp" alt=""></li>
        </ul>
    </div>


    <script>

        // 找到对象  -- 标签
        var obj = document.querySelector('.liss');
        var i = 0   // 控制播放第几张图片

        // 每隔1s做一件事情 --- 重复的
        setInterval(function () {
            // console.log(111);
            i++
            if (i > 4) i = 0   // 播放完最后一张之后，回到第一张
            obj.style.left = -i * 600 + 'px';
            // obj.style.color = 'red';
        }, 2000)
    </script>
</body>

</html>